<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/easycommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>班级学生管理</title>
    <meta charset="utf-8">
    <style>
    	html, body{ margin:0; height:100%; }
    	table{font-size:18px}
    	.input{width:250px;margin:4px;height:35px;border: 1px solid #ccc;font-size:18px;border-radius:4px}
    	label{margin:4px}		
    	.btn{width:100px;height:35px;border-radius:4px;background:#6CAEF5;font-size:18px;margin:15px}	
    </style>
    <script>
    var usergrid; //学生信息
    var classgrid; //班级信息
    $(function(){
        classgrid = $('#classgrid').datagrid({
    		rownumbers:true,
    		singleSelect:false,
    		pagination:true,
    		fit: true, //datagrid自适应宽度
            fitColumn: true, //列自适应宽度
            striped: true, //行背景交换
            nowap: false, //列内容多时自动折至第二行
            border: false,
            //idField: 'id', //主键
            width:560,
            height:'98%',
    		url:"${path}/userclass/classUserList",
    		columns:[[
    			{field:'id', title: '编号', sortable: true, checkbox: true,fitColumns:true },
    			{field:'baby_headimgurl',title:'头像',width:90,fitColumns:true,formatter:formatImage},
    			{field:'baby_name',title:'姓名',width:100,'sortable':true,fitColumns:true },
    			{field:'class_name',title:'班级',width:150,fitColumns:true },
    			{field:'enter_date',title:'报名日期',width:100,fitColumns:true }			 
    		]],
    		toolbar:'#classtb'
    	 })  
    	
         usergrid = $('#usergrid').datagrid({
    		rownumbers:true,
    		singleSelect:false,
    		pagination:true,
    		fit: true, //datagrid自适应宽度
            fitColumn: true, //列自适应宽度
            striped: true, //行背景交换
            nowap: false, //列内容多时自动折至第二行
            border: false,
            //idField: 'id', //主键
            width:710,
            height:'98%',
            url:"${path}/userclass/userList",
    		columns:[[
    			{field:'id', title: '编号', sortable: true, checkbox: true,fitColumns:true },
    			{field:'real_name',title:'姓名',width:100,'sortable':true,fitColumns:true },
    			{field:'sex',title:'性别',width:60,fitColumns:true},
    			{field:'birthday',title:'生日',width:150,fitColumns:true,formatter:formatBirthday}/* ,	
    			{field:'type',title:'类型',width:250,fitColumns:true ,editor:{ type: 'validatebox',options: { required: true} }}  */   				 
    		]],
    		//queryParams: { action: 'query' }, //查询参数
    		toolbar:'#usertb'
    	}) 
	    
	    if('${course_id}'!=''){
	    	$('#classId').combobox('setValue','${course_id}');
	    	classgrid.datagrid("load",{class_id: '${course_id}'});
	    }
	    
	    $('#classSearch').on('click',function(e){
	    	var class_id = $('#classId').combobox('getValue'),
	    	babyName = $('#babyName').val();
	    	if(class_id==''&&babyName==''){
	    		return layer.msg('至少选择一个查询条件', {time: 3000, icon: 6});
	    	}
	    	classgrid.datagrid("load",{class_id: class_id,babyName: babyName});
	    	if($('#babyName').val()!=''){
	    		usergrid.datagrid("load",{real_name: $('#babyName').val()});
	    	}
        });
	    
	    $('#userSearch').on('click',function(e){
	    	var real_name = $('#real_name').val(),phone = $('#phone').val();
	    	if(real_name==''&&phone==''){
	    		return layer.msg('至少选择一个查询条件', {time: 3000, icon: 6});
	    	}
	    	usergrid.datagrid("load",{real_name: real_name,phone: phone});
        });
	})
	
	function formatBirthday(val,row,index){
        return new Date(val*1000).format('yyyy-MM-dd');
    }
    
    function formatImage(val,row,index){
    	if(val){
    		return "<img style='width:80px;height:80px' src='"+val+"'/>";
    	}else{
    		return ""
    	}
    }
    
    function deleteChild(){
    	$.messager.confirm("提示", "你确定要删除吗?", function (r) {
            if (r) {
            	var rows = classgrid.datagrid("getSelections");
            	var idArr = new Array();
                $.each(rows, function (i, rec) {
                	idArr.push(rec.id);
                });
                //console.log(idArr.join(','));
                $.ajax({
                    url:"${path}/userclass/deleteCourseClassUser",    
                    dataType:"json",   
                    data:{ids:idArr.join(',')},  
                    //contentType : 'application/json;charset=utf-8',
                    type:"POST",   
                    success:function(req){
                    	layer.msg(req.msg, {time: 3000, icon: 6});
                        classgrid.datagrid('reload');
                    },
                    error:function(){
        				
                    }
                });
            }
    	});
    }
    
    function addChild(){
    	var courseClassId = $('#classId').combobox('getValue');
    	if(courseClassId==null||courseClassId==''){
    		return layer.msg('请先选择课程', {time: 3000, icon: 6});
    	}
    	var rows = usergrid.datagrid("getSelections");
    	var userList = new Array();  
    	$.each(rows, function (i, rec) {
    		userList.push({
    			courseClassid: courseClassId,
    			babyId: rec.c_user_id,
    			babyName: rec.real_name,
    			babySex: rec.sex_code,
    			babyBirthday: new Date(rec.birthday*1000),
    			babyEnglishName: rec.member_name,
    			babyNickname: rec.member_name,
    			babyHeadimgurl: rec.photo_src
    		});   
        });
        
    	$.ajax({
            url:"${path}/userclass/addCourseClassUser",    
            dataType:"json",   
            data:JSON.stringify(userList),  
            contentType : 'application/json;charset=utf-8',
            type:"POST",   
            success:function(req){
            	if(req.status=='0'){
            		layer.msg(req.msg, {time: 5000, icon: 6});
            	}else{
            		layer.msg(req.msg, {time: 3000, icon: 6});
                	classgrid.datagrid("load",{class_id: $('#classId').combobox('getValue')});
            	}
            },
            error:function(){

            }
        });
    }
    
    </script>
</head>
<body class="easyui-layout">
    <div data-options="region:'center'"  style="width:50%;">
    	<table id="classgrid" title="班级学生查询" class="easyui-datagrid" 
    		style="width:850px" iconCls="icon-save">
        </table>
    </div>
    <div data-options="region:'east',split:true" title="宝宝查询" style="width:50%;">
        <table id="usergrid" class="easyui-datagrid" style="width:850px" iconCls="icon-save">
        </table>
    </div>
    
    <div id="classtb" style="padding:2px 5px;padding-left:10px">
        	<label style="color:red">班级: </label><input class="easyui-combobox mytextbox" id="classId" name="classId" style="width:120px;" data-options="
                            url:'${path}/userclass/getCourseClass',
                            valueField: 'id',
                            textField: 'className'
                            ">
                                姓名: <input type="text" class="mytextbox" id="babyName" style="width:120px;">
        <a id="classSearch" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="deleteChild()">删除学生</a>
    </div>
    
    <div id="usertb" style="padding:2px 5px;padding-left:10px">
        	姓名: <input type="text" class="mytextbox" id="real_name" style="width:120px;">
        	手机号: <input type="text" class="mytextbox" id="phone" style="width:120px;">
        <a id="userSearch" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
    	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addChild()">添加学生</a>
    </div>
</body>
</html>
